<style lang='scss'>
    .addlabel-title{
        display: block;
        font-size: 13px;
        background-color: #fff;
        padding: 12px 16px;
        border-bottom: 1px solid #ddd;
        margin: 0 -10px 6px -12px;
    }
</style>
<template>
	<div>
		<compWrapper title="账号信息" style="padding: 10px">
			<compFormQuery v-if=" type === 'query'" class="margin-top-15" :formdata="getBase" :value="formData" placeholder="--"></compFormQuery>
            <compFormEdit v-else ref="formbase" :labelWidth="150" class="margin-top-15" :formdata="getBase" v-model="formData"></compFormEdit>
		</compWrapper>
		<compWrapper title="附加服务">
            <div v-if="type !== 'query'">
                <div>
                    <Checkbox v-model="formData.autoBill" class="margin-top-15" style="margin-left: 50px" @change="changeAutoBill">账单自动获取</Checkbox>
                </div>
                <div>
                    <Form v-show="formData.autoBill" class="clearfix padding-right-15 margin-top-5" style="margin-left: 25px" :label-width="80"  ref='formData' :model='formData'>
                        <Row>
                            <Col span="6">
                                <FormItem prop='billUser' label="USER ID" >
                                    <Input v-model="formData.billUser" :disabled="type == 'query'" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                            <Col span="6" class="margin-left-10">
                                <FormItem prop='billPassword' label="PASSWORD" >
                                    <Input v-model="formData.billPassword" :disabled="type == 'query'" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                            <div style="padding-top: 5px; font-size: 16px;" class="margin-left-10">
                                <Tooltip max-width="230" content="登录快递官网的用户名和密码"><Icon type="md-help-circle" /></Tooltip>
                            </div>
                        </Row>
                    </Form>
                </div>
            </div>
            <div v-else>
                <div class="margin-top-15" style="margin-left: 50px">账单自动获取：{{formData.autoBill == 1 ? '是' : '否'}}</div>
                <div>
                    <Form v-show="formData.autoBill" class="clearfix padding-right-15 margin-top-5" style="margin-left: 25px" :label-width="80"  ref='formData' :model='formData'>
                        <Row>
                            <Col span="6">
                                <FormItem prop='billUser' label="USER ID" >
                                    {{formData.billUser || '--'}}
                                </FormItem>
                            </Col>
                            <Col span="6">
                                <FormItem prop='billPassword' label="PASSWORD" >
                                    {{formData.billPassword || '--'}}
                                    <span style="padding-top: 5px; font-size: 16px;" class="margin-left-10">
                                        <Tooltip max-width="230" content="登录快递官网的用户名和密码"><Icon type="md-help-circle" /></Tooltip>
                                    </span>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </div>
            </div>
        </compWrapper>
        <compWrapper title="操作历史" v-if=" type === 'query' ">
			<compLog class="margin-15" :data="opLogList" :columns="logcolumn"></compLog>
		</compWrapper>
		<div v-if="type !== 'query'" class="text-right margin-top-10">
			<Button type="primary" @click="submit">保存</Button>
			<Button v-if="type !== 'add'" class="margin-left-10" @click="onCancel">返回</Button>
		</div>
		<Spin v-if="loading" fix></Spin>
	</div>
</template>

<script>
import { h,resolveComponent } from 'vue'
import { HttpSysAccountDetail, HttpSysAccountSave, HttpSysAccountDetailHide} from '@/service/api/views';
import { mapGetters } from "vuex";
import mixins from '../mixin'
export default {
	props:['querytype','activeid'],
    mixins: [ mixins ],
	data() {
		return {
            type: this.querytype || this.$route.params.type,
            id: this.activeid || this.$route.query.id,
            loading: false,
            formData: {
                carrierCode: 'FedEx',
                type: 0,
            },
            warehouseList1: [],
            serviceList: [],
            productList: [],
            opLogList: [],
		};
	},
	created() {
        this.getDetail();
	},
	computed: {
        ...mapGetters('dictionary',['getBillcusorgList']),
        isFedex() {
            return this.formData.carrierCode == 'FedEx';
        },
        isUPS() {
            return this.formData.carrierCode == 'UPS' || this.formData.carrierCode == 'UPSCA';
        },
        isWebService() {
            return this.formData.carrierCode == 'FedEx' && this.formData.type == 0
        },
        isRESTful() {
            return this.formData.carrierCode == 'FedEx' && this.formData.type == 1
        },
        // isOther() {
        //     return this.formData.carrierCode !== 'FedEx' && this.formData.carrierCode !== 'UPS' && this.formData.carrierCode !== 'UPSCA' ;
        // },
		getBase() {
			return [
                {
                    label: "快递公司",
                    key: 'carrierCode',
                    tag:'RadioGroup',
                    children: (h) => {
                        return h(("span"),{
                            modelValue:this.formData.carrierCode,
                        },{
                            default:() => [
                            [{ key: 'FedEx', label: 'FedEx' }, { key: 'UPS', label: 'UPS' }].map(json=>{
                                return h(resolveComponent("Radio"),
                                {
                                    label: json.key,
                                },json.label);
                            })
                        ]
                        });
                    },
                    // tag: 'div',
                    // children: (h) => {
                    //     return <RadioGroup v-model={this.formData.carrierCode} on-change={this.changeCarrierCode.bind(this)}>
                    //         <Radio label={'FedEx'}>
                    //             <span>FedEx</span>
                    //         </Radio>
                    //         <Radio label={'UPS'}>
                    //             <span>UPS</span>
                    //         </Radio>
                    //     </RadioGroup>
                    // },
                    on:{
                        'on-change':(val,val1)=>{
                            this.formData = { carrierCode: val1, active: this.formData.active}
                        }
                    },
                    show: this.type == 'add',
                },
                {
                    label: "快递公司",
                    key: 'carrierCode',
                    show: this.type !== 'add',
                    query: true,
                },
                {
                    label: '对接方式',
                    key: 'type',
                    tag: 'Select',
                    options: [
                        { label: 'Web Services', value: 0},
                        { label: 'RESTful', value: 1},
                    ],
                    props:{
                        filterable: false,
                        clearable: false,
                        placeholder: '请选择',
                    },
                    on:{
                        'on-change':(val,val1)=>{
                            this.formData = { carrierCode: this.formData.carrierCode, type: val1, active: this.formData.active}
                        }
                    },
                    show: this.isFedex,
                },
                {
                    label: '账号别名',
                    key: 'accountName',
                    show: this.isFedex,
                },
                {
                    label: '账号别名',
                    key: 'accountName',
                    show: this.isUPS,
                },
                {
                    label: 'Account No',
                    key: 'accountNumber',
                    show: this.isFedex || this.isUPS,
                },
                {
                    label: 'MeterNumber',
                    key: 'meterNumber',
                    show: this.isWebService,
                },
                {
                    label: 'Password',
                    key: 'password',
                    show: this.isWebService || this.isUPS,
                },
                {
                    label: 'HubID',
                    key: 'hubId',
                    required: false,
                    show: this.isWebService,
                    tag: 'div',
                    children: (h) => {
                        return  <div style="font-size: 16px;">
                            <Input v-model={this.formData.hubId} />
                            <div style="position: absolute;left: 100%;top: 1px;z-index: 999;">
                                <Tooltip placement="top" content="开启SMART POST服务需填写"><Icon type="md-help-circle"/></Tooltip>
                            </div>
                        </div>
                    },
                },
                {
                    label: 'Account Key',
                    key: 'accountKey',
                    show: this.isWebService || this.isUPS,
                },
                {
                    label: 'Client ID',
                    key: 'clientId',
                    show: this.isRESTful && this.isFedex,
                },
                {
                    label: 'Client Secret',
                    key: 'clientSecret',
                    show: this.isRESTful && this.isFedex,
                },
                {
                    label: 'accessLicenseNumber',
                    key: 'accessLicenseNumber',
                    show: this.isUPS,
                },
			];
		},
        logcolumn(){
            return [
                {
                    title: this.$ct('global.common.operate_time',{defaultValue:'操作时间'}),
                    key: 'createdAt',
                },
                {
                    title: this.$ct('global.common.operator',{defaultValue:'操作人'}),
                    key: 'createdName',
                },
                {
                    title: this.$ct('global.common.operate_type',{defaultValue:'操作类型'}),
                    render:(h,{row})=>{
                        return this.getLogActions[row.operateType] || '--';
                    }
                },
                {
                    title: '说明',
                    key: 'remark',
                },
            ]
        }
	},
	methods: {
        changeAutoBill() {
            delete this.formData.billUser;
            delete this.formData.billPassword;
        },
		onCancel() {
            if(this.type == 'add'){
                this.$emit('on-update');
                this.$emit('on-close');
            }else{
                this.$router.push({
                    name: "tmsAccountManageList"
                })
            }
		},
		async getDetail() {
			if (this.type === "add") return;
			this.loading = true;
            if(this.type === 'query'){
                await HttpSysAccountDetailHide({
			    	id: this.id,
			    }).then(res => {
                    this.formData = res.data;
                    this.formData.autoBill = res.data.isBill == 1 ? true : false;
                    this.opLogList = res.data.orderLogsEntityList;
                    this.loading = false;
			    }, err => {
			    	this.loading = false;
			    	this.$Message.error(err.message);
			    });
            }
            if(this.type === 'edit'){
                await HttpSysAccountDetail({
			    	id: this.id,
			    }).then(res => {
                    this.formData = res.data;
                    this.formData.autoBill = res.data.isBill == 1 ? true : false;
                    this.opLogList = res.data.orderLogsEntityList;
                    this.loading = false;
			    }, err => {
			    	this.loading = false;
			    	this.$Message.error(err.message);
			    });
            }
		},
		async submit() {
			const valid = await this.$refs.formbase.validate();
			if (!valid) return;
            this.formData.isBill = this.formData.autoBill ? 1 : 0;
            let organizationId = global.SYSID;
            if(this.formData.carrierCode == 'UPS'){
                this.formData.type = 0;
            }
			this.loading = true;
			HttpSysAccountSave({
                id: this.id,
                ...this.formData,
                organizationId
			}).then(res => {
				this.loading = false;
				this.onCancel();
                this.$Message.success(res.message)
			}, err => {
				this.loading = false;
				this.$Message.error(err.message);
			})
		},
	}
};
</script>
